<template>
    <div class="tnxel-toolbar">
        <div class="flex-v-center">
            <template v-for="(item, index) of leftItems" :key="index">
                <el-divider direction="vertical" v-if="item === '|'"/>
                <ToolBarItem
                    :item="Item.from(item)"
                    :size="size"
                    v-else-if="typeof item ==='object'"/>
            </template>
        </div>
        <div class="flex-v-center">
            <ToolBarItem v-for="(item, index) of rightItems" :key="index"
                :item="Item.from(item)"
                :size="size"/>
        </div>
    </div>
</template>

<script>
import ToolBarItem from './ToolBarItem.vue';
import Item from './ToolBarItem.js';

export default {
    name: 'TnxelToolbar',
    components: {ToolBarItem},
    props: {
        leftItems: Array,
        rightItems: Array,
        size: {
            type: String,
            validator: value => {
                return ['small', 'default', 'large'].includes(value);
            },
            default: 'default',
        },
    },
    data() {
        return {
            Item,
            model: {},
        };
    },
    methods: {}
}
</script>

<style>
.tnxel-toolbar {
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
